<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../utils/vue.min.js"></script>
		<!-- 引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<style>
			.flex-row {
				display: flex;
				flex-direction: row;
			}

			.flex-coloum {
				display: flex;
				flex-direction: column;
			}

			.flex-center {
				display: flex;
				align-items: center;
			}

			.cover {
				display: flex;
				align-items: center;
				flex-direction: column;
			}
			
			 .red{
			 color: red;
			 }
			 
			 /* css动画 */
			@keyframes rotate{
				from{transform: rotateZ(0deg);}
				to{transform: rotateZ(360deg);}
			}
			.roteta{
				 animation: rotate;
				 animation-duration: 6s;
				 animation-timing-function: linear;
				 animation-iteration-count: infinite;
				 animation-play-state: running;
			}
			.pause{
				animation: rotate;
				animation-duration: 6s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
				animation-play-state:paused;
			}
			
			 /* css动画 */
			.rotate2{
				transform-origin:0 0;
				-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="flex-center" style="margin-bottom: 20px;">
				<!-- 输入关键字搜索音乐 -->
				<input @keyup.enter="searchMusic()" v-model="targetSong" />
				<button @click="searchMusic()">search</button>
			</div>
			<div class="flex-row">
				<div class="flex-coloum" style="background-color: honeydew; width: 250px;height: 500px;overflow: auto;margin-right: 10px;">
					<!-- 关键字查询结果 -->
					<div v-for="(item, index) in musicList" class="flex-row" style="margin-left: 10px;">
						<span>
							<img :src="playImg" style="width: 18px;" @click="playMusic(item,index)" ref="item.id"/>
							<span  :class="index == color?'red':''">{{item.name}}</span>
							<img :src="mvImgUrl" style="width: 18px;" @click="playMV(item)" />
						</span>
					</div>
				</div>
				<!-- 歌曲封面区 -->
				<div style="background-color: ghostwhite; position: relative;width: 800px;height: 500px;" class="cover" v-if="!playMvFlag">
					<div style="position: absolute;">
						<p style="margin-top: 80px;"></p>
						<img :src="coverImg" style="height: 300px;width: 300px; border:35px double dimgray;border-radius: 50%;z-index: -1;" :class="isPaused?'pause':'roteta' "/>
					</div>
					<img :src="pointImg" style="z-index:1" :class="isPaused?'stop':'rotate2' " />
				</div>
				<!-- 播放mv -->
				<div v-show="playMvFlag" style="background-color: ghostwhite;">
					<video controls="controls" autoplay="autoplay" ref="myVideo" style="height: 500px;width: 800px;"></video>
				</div>

				<!-- 热门评论区 -->
				<div>
					<div style="background-color: honeydew;width: 300px; height: 500px; overflow: auto;margin-left: 10px;">
						<div v-for="item in commentList" class="flex-row"> 
							<img :src="item.user.avatarUrl" style="width:30px;height: 30px; border-radius: 50%;margin: 10px;" />
							<div style="margin-right: 20px;">
								<span style="color: skyblue;">{{item.user.nickname}}</span>
								<p>{{item.content}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部播放栏 -->
			<div style="height: 50px;" >
				<audio controls="controls" ref="myAudio" autoplay @play="play()" @pause="pause()" style="width: 72%;margin-top: 20px;" v-show="!playMvFlag"></audio>
			</div>
		</div>
	</body>

	<script src="../js/music.js"></script>
</html>